<template>
  <div class="area-methods">
    <div class="title-box">
      <div class="title">流域方案</div>
      <div class="form-box">
        <div>
          <span>方案名称：</span>
          <el-input v-model="form.scName" placeholder="请输入" />
          <span>开始时间：</span>
          <el-date-picker v-model="form.sTime" type="datetime" placeholder="请选择时间" />
          <span>结束时间：</span>
          <el-date-picker v-model="form.eTime" type="datetime" placeholder="请选择时间" />
        </div>
        <div class="btn-box">
          <el-button type="primary" @click="handleRiverScheme">查询</el-button>
          <el-button type="primary" @click="handleScheme">新建</el-button>
        </div>
      </div>
      <div class="table-box">
        <el-table :data="state.tableData" highlight-current-row border style="width: 100%"
          @current-change="handleCurrentChange">
          <el-table-column label="单选" width="80" align="center">
            <template #default="scope">
              <el-radio v-model="CurrentItem" :label="scope.row" @change="getCurrentRow(scope.row)">{{ '' }}</el-radio>
            </template>
          </el-table-column>
          <el-table-column prop="scName" label="方案名称" show-overflow-tooltip width="200" align="center" />
          <el-table-column prop="creatorName" label="创建人" align="center" />
          <el-table-column prop="createTime" label="创建时间" show-overflow-tooltip align="center" />
          <el-table-column prop="name" label="操作" width="160" align="center">
            <template #default="{ row }">
              <el-button type="danger" @click="handleDeleteScheme(row)">删除</el-button>
              <el-button type="primary" @click="handleScheme(row)">编辑</el-button>
            </template>
          </el-table-column>
          <el-table-column prop="name" label="发布" align="center">
            <template #default="{ row }">
              <el-switch v-model="row.isPublish" :active-value="1" :inactive-value="0"
                @change="handleChangeStatus($event, row)" />
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div class="detail-box">
      <div class="title">流域方案详情</div>
      <div class="detail-top">
        <div class="name-box">
          <span>方案名称</span>
          <el-input v-model="state.selectedTitle" placeholder="请输入" :disabled="true" />
        </div>
      </div>
      <div class="detail-bottom">
        <el-tabs>
          <el-tab-pane lazy label="预报配置信息">
            <ConfigInfo :row="CurrentItem" :zId="props.zId" />
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
    <!-- 新建、编辑 -->
    <riverScheme ref="riverSchemeRef" @handleSaveRiverScheme="handleSaveRiverScheme" :zId="state.zId" />
  </div>
</template>

<script setup>
import { ref, reactive, watch } from 'vue'
import { renderTime } from '@/utils/index'
import {
  // getRiverScheme,
  getBasinSchemeList,
  saveBasinSchemes,
  saveBasinSchemesDelete,
  setPublishBasin
} from '@/services/modules/compute-methods'
//预报配置信息
import ConfigInfo from './cpns/configInfo/index.vue'

//流域方案弹框
import riverScheme from './cpns/riverScheme/index.vue'
//新建流域
import RiverModal from '@/pages/ComputeMethods/cpns/riverModal/index.vue'
const form = reactive({})
const riverSchemeRef = ref(null)
const state = reactive({
  schemeId: 0,
  isPublic: true,
  selectedTitle: '',
  tableData: [],
  zId: 0,
  title: ''
})
// const builtPlanRef = ref(null)
let CurrentItem = ref('')
// 控制放大弹框
let provingItem = ref(false)

const props = defineProps({
  // 流域id
  zId: {
    type: Number,
    default: 0
  },
  zoneId: {
    type: Number,
    default: 1
  }
})
watch(
  () => props.zId,
  async () => {
    // 监听左侧选择的流域id 获取流域方案列表
    await schemeList(props.zId)
    state.zId = props.zId
    if (state.tableData[0]) {
      // 默认选中第一个方案
      getCurrentRow(state.tableData[0])
    }
  },
  { immediate: true, deep: true }
)
//切换发布状态
const handleChangeStatus = (isPublish, row) => {
  setPublishBasin({
    // 发布状态
    isPublish,
    // 方案ID
    id: row.id
  }).then(res => {
    if (res.code == 200) {
      ElMessage.success('发布状态已更改')
      // 刷新列表
      schemeList(props.zId)
    }
  })

}
// 关闭弹框调用事件
function closeProVingItem() {
  provingItem.value = false
}

function handleDeleteScheme(row) {
  ElMessageBox.confirm(`是否删除${row.scName}`, '提示', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(() => {
      saveBasinSchemesDelete({ id: row.id }).then((res) => {
        if (res.code === 200) {
          ElMessage.success(res.msg)
          schemeList(props.zId)
        }
      })
    })
    .catch(() => {})
}

// 新建/编辑 流域方案
function handleScheme(row) {
  state.schemeId = ''
  riverSchemeRef.value.handleOpenModal({ ...row, zoneId: props.zId })
}
// 保存流域方案
function handleSaveRiverScheme(item) {
  saveBasinSchemes(item).then((res) => {
    if (res.code === 200) {
      schemeList(props.zId)
    }
  })
}
//查询流域方案
function handleRiverScheme() {
  schemeList(props.zId)
}
//获取方案列表 item:流域id
function schemeList(item) {
  return new Promise((resolve, reject) => {
    if (form.sTime) {
      form.sTime = renderTime(form.sTime)
    }
    if (form.eTime) {
      form.eTime = renderTime(form.eTime)
    }
    getBasinSchemeList({ basinId: item, ...form }).then((res) => {
      if (res.code === 200) {
        state.tableData = res.data
        // 列表添加创建时间
        state.tableData = state.tableData.map((item) => {
          return (item = { ...item, createTime: renderTime(item.createTime) })
        })
        if (state.tableData.length) {
          getCurrentRow(state.tableData[0])
        } else {
          state.selectedTitle = ''
        }
        // getCurrentRow(state.tableData[0])
        resolve(state.tableData)
      }
    })
  })
}
//选中区域方案
function handleCurrentChange(val) {
  if (val) {
    state.selectedTitle = val.scName
  }
}
const getCurrentRow = (item) => {
  CurrentItem.value = item
  state.schemeId = item.id
  state.selectedTitle = item.scName
}
</script>

<style lang="less" scoped>
:deep(.el-dialog-box) {
  height: 90vh;
  margin-top: 5vh !important;
  .el-dialog__body {
    height: calc(100% - 100px);
  }
}
.area-methods {
  width: 100%;
  height: 100%;
  .title-box {
    height: 300px;

    .title {
      height: 25px;
      color: #409eff;
      padding-top: 10px;
      // font-weight: 600;
    }
    .form-box {
      height: 25px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      color: #797979;
      :deep(.el-input) {
        width: 150px;
        margin-right: 30px;
      }

      .btn-box {
        margin-left: 10px;
      }
    }
    .table-box {
      height: calc(100% - 50px);
      box-sizing: border-box;
      padding: 10px 0 10px 0;
      :deep(.el-table) {
        height: 100%;
      }
    }
  }
  .detail-box {
    height: calc(100% - 270px);
    .title {
      height: 25px;
      color: #409eff;
      padding-top: 10px;
      .selected-color {
        color: var(--fold-word-color);
        font-weight: 600;
      }
    }
    .detail-top {
      width: 100%;
      height: 50px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .name-box {
        display: flex;
        align-items: center;
        height: 30px;
        width: 400px;

        span {
          width: 100px;
          color: #797979;
        }
        // :deep(el-input) {
        //   width: 300px;
        // }
      }
      .btn-box {
        margin-right: 30px;
      }
    }
    .detail-bottom {
      height: calc(100% - 125px);
      box-sizing: border-box;
      :deep(.el-tabs) {
        height: 100%;
        .el-tabs__content {
          height: calc(100% - 50px);
          .el-tab-pane {
            height: 100%;
          }
        }
      }
      // :deep(.el-tabs--border-card) {
      //   height: 100%;
      //   .el-tabs__content {
      //     height: calc(100% - 100px);
      //     .el-tab-pane {
      //       height: 100%;
      //     }
      //   }
      // }
    }
  }
}
</style>
